﻿Ext.onReady(function () {
    Ext.QuickTips.init();
    //定义上部图片菜单
    var topPanel = new Ext.panel.Panel
        ({
            width: 400,
            height: 80,
            html: ['<img id="leftImg" src="Images/loginTop.gif"  width="400" height="80" alt="" />  ']
        });

    var checkcode = Ext.create('CheckCode', {
        cls: 'key',
        fieldLabel: '验证码',
        name: 'CheckCode',
        id: 'CheckCode',
        allowBlank: false,
        isLoader: true,
        blankText: '验证码不能为空',
        codeUrl: 'Handler/GetCode.ashx',
        width: 170,
        labelAlign: 'right',
        labelWidth: 100             //标签宽度
    });
    //定义登陆菜单
    var loginform = new Ext.form.Panel({
        defaults: {                 //统一设置表单字段默认属性
            labelSeparator: ':',    //分隔符号
            labelWidth: 100,        //标签宽度
            allowBlank: false,      //不允许为空
            maxLength: 20,          //最大长度
            xtype: 'textfield',
            labelAlign: 'right',
            msgTarget: 'side'
        },
        id: 'loginform',
        width: 400,
        height: 180,
        frame: true,             //是否渲染表单
        cls: 'loginform',        //样式
        bodyStyle: 'padding:20px 0px 0px 1px',
        items: [
          {
              fieldLabel: '用户名',
              width: 300,
              name: 'username',
              id: 'username',
              blankText: '请输入用户名!',
              maxLengthText: '用户名不能超过20个字符!'
          },
           {
               fieldLabel: '密　码',
               width: 300,
               name: 'password',
               id: 'password',
               inputType: 'password',
               blankText: '请输入密码!',
               maxLengthText: '密码不能超过20个字符!'
           },
           checkcode],
        buttons: [{
            text: '确 定',
            handler: login
        }, {
            text: '重 置',
            handler: reset
        }],
        buttonAlign: 'center',
        listeners: {
            render: function (input) {
                new Ext.KeyMap(input.getEl(), [{
                    key: Ext.EventObject.ENTER,
                    fn: function () {
                        login();
                    }
                }]);
            }
        }
    })
    //登陆事件
    function login() {
        if (loginform.getForm().isValid()) {
            var myMask = new Ext.LoadMask('loginform', { msg: "正在登录,请稍候..." });
            Ext.Ajax.request({
                loadMask: myMask.show(),  
                url: 'Handler/LoginUser.ashx',
                method: 'post',
                success: function (response, opts) {
                    var obj = Ext.decode(response.responseText);
                    if (obj.success == true) {
                        //winLogform.hide();
                        window.location.href = 'WebForm1.aspx';  //打开主页
                    } else {
                        myMask.hide();
                        Ext.Msg.alert("提示", "登录失败:<br>" + obj.msg);
                    }
                },
                failure: function (response, opts) {
                    myMask.hide(); 
                    var obj = Ext.decode(response.responseText);
                    Ext.Msg.alert("系统错误", obj.result);
                }
            });
        }




        //        if (loginform.getForm().isValid()) {
        //            loginform.getForm().submit({
        //                //clientValidation: true,
        //                waitMsg: '正在提交数据...',
        //                waitTitle: '提示',
        //                url: 'Handler/LoginUser.ashx',
        //                method: "POST",
        //                params: { 'UserID': loginform.getForm().findField('username').getValue()
        //                    		, 'UserPwd': loginform.getForm().findField('password').getValue()
        //                    		, 'CheckCode': loginform.getForm().findField('CheckCode').getValue()
        //                },
        //                success: function (form, action) {
        //                    if (action.result.msg == "OK") {
        //                        winLogform.hide();
        //                    } else {
        //                        Ext.Msg.alert("提示", "登陆失败:<br>" + action.result.msg);
        //                    }
        //                },
        //                failure: function (form, action) {
        //                    var flag = action.response.responseText;
        //                    Ext.Msg.alert("提示", flag);
        //                   // Ext.Msg.alert("提示", "登陆失败，请与管理员联系！");
        //                }
        //            });
        //        }
    }
    //重置菜单
    function reset() {
        loginform.getForm().reset();
    }

    //登陆窗体
    var winLogform = new Ext.Window({
        iconCls: 'icon-grid',
        title: '用户登陆界面',
        plain: true, //渲染窗口透明背景
        width: 400,
        height: 300,
        resizable: false, //调整大小
        modal: true, //模态窗口
        closable: false, //禁关闭用
        items: [topPanel, loginform]
    });
    winLogform.show();
})

//定义验证码控件  
Ext.define('CheckCode', {
    extend: 'Ext.form.field.Text',
    alias: 'widget.checkcode',
    inputTyle: 'codefield',
    codeUrl: Ext.BLANK_IMAGE_URL,
    isLoader: true,
    onRender: function (ct, position) {
        this.callParent(arguments);
        this.codeEl = ct.createChild({ tag: 'img', src: Ext.BLANK_IMAGE_URL });
        this.codeEl.addCls('x-form-code');
        this.codeEl.on('click', this.loadCodeImg, this);
        if (this.isLoader) this.loadCodeImg();
    },
    alignErrorIcon: function () {
        this.errorIcon.alignTo(this.codeEl, 'tl-tr', [2, 0]);
    },
    //如果浏览器发现url不变，就认为图片没有改变，就会使用缓存中的图片，而不是重新向服务器请求，所以需要加一个参数，改变url  
    loadCodeImg: function () {
        this.codeEl.set({ src: this.codeUrl + '?id=' + Math.random() });
    }
});  